import React from 'react';
import {connect} from 'dva';
import {Link, browserHistory} from 'dva/router';
import {formatMobile} from '../../utils/commons';
import {Table, Row, Col, Form, Input, Select, Button, Modal, Popconfirm, InputNumber, message} from 'antd';
import BizParams from '../commons/BizParams'
const FormItem = Form.Item;
const Option = Select.Option;
const R=require("ramda");

const gongShangHuDetail = Form.create()(class GongShangHuDetail extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                open: false
            }
        }

        handleOpen= () => {
            this.setState({ open: true });
        }


        handleCancel = () => {
            this.setState({ open: false });
            this.props.form.resetFields();
        }

        handleConfirm = () =>{
            this.props.form.validateFields((errors, values) => {
                if (errors) return; 
                values.id = this.props.gongShangHu.dataSource && this.props.gongShangHu.dataSource.id ? this.props.gongShangHu.dataSource.id : null;
                if(!R.equals(R.pick(Object.keys(values),this.props.gongShangHu.dataSource),values)){
                    this.props.dispatch({
                        type: R.isNil(values.id) ? 'gongShangHu/createLesseeResource' : 'gongShangHu/updateLesseeResource',
                        payload:{
                            ...values,
                            onSuccess:() =>{
                                this.handleCancel();
                                if(this.props.refreshList) this.props.refreshList();
                            }
                        }
                    })
                }
            });
        }

    render(){
        const { getFieldDecorator } = this.props.form;
        let formItemLayout = { labelCol: { span: 7 }, wrapperCol: { span: 14 } };

        let dataSource = this.props.gongShangHu.dataSource ? this.props.gongShangHu.dataSource : {};

        let footer = [
            <Button key="save" size="large" loading={this.props.loading} onClick={this.handleConfirm.bind(this)} style={{ display: this.state.disabled ? 'none' : 'inline-block' }}>保存</Button>,
            <Button key="cancel" size="large" loading={this.props.loading} onClick={this.handleCancel.bind(this)}>{this.state.disabled ? "关闭" : "取消"}</Button>
        ];        

        return(
            <Modal  maskClosable={false} visible={this.state.open} width={520} title={"创建个体工商户"} confirmLoading={this.props.loading} onCancel={this.handleCancel.bind(this)} footer={footer}>
                <Form>
                    <FormItem
                        {...formItemLayout}
                        label="个体工商户名称"
                        hasFeedback
                    >
                        {getFieldDecorator('name', {
                            rules: [{
                                required: true, message: '请输入个体工商户名称！',
                            }],
                            initialValue: dataSource.name
                        })(
                            <Input />
                        )}
                    </FormItem>

                    <FormItem
                        {...formItemLayout}
                        label="开户银行"
                        hasFeedback
                    >
                        {getFieldDecorator('openbank', {
                            rules: [{
                                required: true, message: '请输入开户银行',
                            }],
                            initialValue: dataSource.openbank ? dataSource.openbank+"" : undefined
                        })(
                            <BizParams sprCode={"bankCode"} style={{width:'100%'}} blank={true}/>

                        )}
                    </FormItem>

                    <FormItem
                        {...formItemLayout}
                        label="开户支行"
                        hasFeedback
                    >
                        {getFieldDecorator('bankbranch', {
                            rules: [{
                                required: true, message: '请输入开户支行',
                            }],
                            initialValue: dataSource.bankbranch
                        })(
                            <Input />
                        )}
                    </FormItem>

                    <FormItem
                        {...formItemLayout}
                        label="	收款人账号"
                        hasFeedback
                    >
                        {getFieldDecorator('payeeno', {
                            rules: [{
                                required: true, message: '请输入收款人账号',
                            }],
                            initialValue: dataSource.payeeno
                        })(
                            <Input />
                        )}
                    </FormItem>

                    <FormItem
                        {...formItemLayout}
                        label="收款人"
                        hasFeedback
                    >
                        {getFieldDecorator('payeename', {
                            rules: [{
                                required: true, message: '请输入收款人',
                            }],
                            initialValue: dataSource.payeename
                        })(
                            <Input />
                        )}
                    </FormItem>
                </Form>

            </Modal>   
            )
        }
})

function mapStateToProps(state){
    return{
        loading: state.loading.models.gongShangHu, gongShangHu: state.gongShangHu
    };
}

export default connect(mapStateToProps)(gongShangHuDetail);